<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>


<div class="layui-fluid" id="app" style="margin-top: 0px">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">案例</li>
                    <li>添加内容</li>

                </ul>
                <div class="layui-tab-content" style="padding-left: 0px;padding-right: 0px">

                    <div class="layui-tab-item layui-show">

                        <!--<div>-->
                        <!--<div class="layui-btn-group">-->
                        <!--&lt;!&ndash;<button class="layui-btn ">推荐</button>&ndash;&gt;-->
                        <!--<button class="layui-btn " onclick="getCheckBox();">批量操作1</button>-->
                        <!--<button class="layui-btn" >批量操作1</button>-->
                        <!--</div>-->
                        <!--</div>-->

                        <div class="layadmin-trailer ">


                            <table class="layui-table" lay-skin="line">

                                <thead>
                                <tr>
                                    <!--<th>#ID</th>-->

                                    <th>描述</th>
                                    <!--&lt;!&ndash;<th>创建时间</th>&ndash;&gt;-->
                                    <th>图片</th>
                                    <!--<th>参数</th>-->
                                    <!--<th>状态</th>-->
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in items" :data_id="item.id">

                                    <td>{{item.cases_detail}}</td>
                                    <td>
                                        <img class="layui-upload-img" style="width: 180px;height: 60px; object-fit: cover;" :src="item.cases_img">
                                        <!--{{item.src}}-->

                                    </td>
                                    <td style="text-align: center">

                                        <div class="layui-btn-group">
                                            <button class="layui-btn layui-btn-sm layui-btn-primary"
                                                    onclick="del(this)"    :data_id="item.id" :data_index="index">删除
                                            </button>

                                        </div>

                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>



                    <div class="layui-tab-item ">
                        <form class="layui-form" action="" lay-filter="component-form-group">
                            <!--<div class="layui-card-header">表单组合</div>-->
                            <div class="layui-card-body" style="padding: 15px;">
                                <input type="hidden" name="cases_id" value="{$id}">



                                <div class="layui-form-item">
                                    <label class="layui-form-label">描述</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="cases_detail" id="desc" lay-verify="required"
                                               autocomplete="off"
                                               placeholder="请输入"
                                               class="layui-input">
                                    </div>
                                </div>


                                <div class="layui-form-item">
                                    <label class="layui-form-label">图片</label>

                                    <div class="layui-input-inline " style="width: auto;">

                                        <div class="layui-upload-drag" id="pic1" style="padding: 2px">
                                            <img class="layui-upload-img" style="width: auto;height: 120px; object-fit: cover;" src="/res/img/thumb.png">
                                            <input type="hidden" name="cases_img" value="" >
                                        </div>


                                        <!--<div class="layui-btn layui-btn-primary" id="test10">-->
                                        <!--<i class="layui-icon">点击上传</i>-->
                                        <!--&lt;!&ndash;<p>点击上传</p>&ndash;&gt;-->
                                        <!--</div>-->


                                    </div>
                                </div>



                            </div>
                            <div class="layui-card-footer form-footer2" >
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <div class="layui-footer">
                                            <button class="layui-btn" lay-submit=""
                                                    lay-filter="component-form-demo1">立即提交
                                            </button>
                                            <!--<button type="reset" class="layui-btn layui-btn-primary">重置-->
                                            <!--</button>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>


                </div>
            </div>

            <!--<div class="layui-card">-->
                <!--&lt;!&ndash;<div class="layui-card-header">财务报表,提现管理</div>&ndash;&gt;-->
                <!--<div class="layui-card-body">-->
                    <!---->


                <!--</div>-->


            <!--</div>-->

        </div>


    </div>
</div>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    //vue对象
    var app = new Vue({
        el: '#app',
        data: {
            check: [],
            curr: 1,//当前页
            limit: 10,//当前页
            items: []
        }
    });

    //初始数据
    function init() {
        layer.load(2);
        $.get('/admin/cases/detail_cases', {id:'{$id}'},
            function (res) {
                layer.closeAll();
                app.items = res.data;
            }
        );
    }


    function edit(that) {

        var data_id = $(that).attr('data_id');
        layer.open({

            type: 2,
            title: '编辑',
            shadeClose: true,
            shade: 0.8,
            area: ['700px', '500px'],
            content: "{:url('edit')}?id=" + data_id //iframe的url

        });


    }

    //获取批量IDS
    function getCheckBox() {
        var check = [];
        $.each($('input[type=checkbox]:checked.vue_index'), function () {
            check.push($(this).val());
        });
        return check;
    }


    function del(that) {
        var id=$(that).attr('data_id');
        var index = parent.layer.confirm('确认继续执行？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.post('{:url("pic_del")}', {id: id}, function (res) {
                parent.layer.close(index);
                if (res.code == 1) {
                    init();
                }

            });
        }, function () {
            parent.layer.close(index);
        });
    }




    //    function del(that) {
    //        var ids = getCheckBox();
    //        if (ids.length > 0) {
    //            var index = layer.confirm('确认继续执行？', {
    //                btn: ['确定', '取消'] //按钮
    //            }, function () {
    //                $.post('{:url("del")}', {ids: ids}, function (res) {
    //                    if (res.code == 1) {
    //                        layer.msg(res.msg, {icon: 1})
    //                        init();
    //                    }
    //                    layer.close(index);
    //                });
    //            }, function () {
    //                layer.close(index);
    //            });
    //        }
    //
    //
    //    }

    //按需引入layui模块
    layui.use(['laypage', 'layer', 'table', 'element','upload'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
        var table = layui.table;
        var element = layui.element;
        var form = layui.form;
        var upload = layui.upload;
        element.on('tab(docDemoTabBrief)', function (data) {
//            console.log(this); //当前Tab标题所在的原始DOM元素
//            console.log(data.index); //得到当前Tab的所在下标
//            console.log(data.elem); //得到当前的Tab大容器
            if (data.index == 0) {
                init();
            }
        });

        /* 监听提交 */
        form.on('submit(component-form-demo1)', function (data) {

            $.post("{:url('pic_add')}", data.field, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1})
                    $('#desc').val('');
                    var pic='/res/img/thumb.png';
                    $('#pic1 img').attr('src', pic);
                    return false;
                } else {
                    layer.msg(res.msg, {icon: 2})
                    return false;
                }
            });


            return false;
        });

        //拖拽上传
        upload.render({
            elem: '#pic1'
            ,url: '/tool/qiniu/upload'
            ,before:function () {
                layer.load(2);
            }
            ,done: function(res){
                layer.closeAll();
                console.log(res)
                $('#pic1 img').attr('src',res.data.url);
                $('#pic1 input').val(res.data.pic);
            }
        });


        init();


    });


</script>


</body>
</html>




